<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./d3.v5.min.js"></script>
</head>

<body>

  <svg width="500" height="500" style="background: #efefef;">


  </svg>

  <script>

    var datalist = [10, 20, 30, 40, 50, 60, 70];

    //线性比例尺
    var x_scale = d3.scaleLinear()
      //数据的范围
      .domain([0, d3.max(datalist)])
      //画布的大小
      .range([30, 470]);

    //序数比例尺 scaleBand
    var band = d3.scaleBand().domain(d3.range(datalist.length))
      .range([0, 110])



    let x_axis = d3.axisBottom(x_scale);
    var svg = d3.select('svg');
    svg.append('g')
      .attr('transform', 'translate(0,450)')
      .call(x_axis)
      ;



  </script>

</body>

</html>